<template>
  <div class="container-index">
    <Header/>
    <Footer/>
    <!-- <ArticleTuiJian/> -->
    <div class="container-view">
      <transition mode="out-in" :name="transtionSlide" 
        :enter-active-class="'slide-active'"
        :leave-active-class="'slide-active'">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
      </transition>
      <transition mode="out-in" :name="transtionSlide" 
        :enter-active-class="'slide-active'"
        :leave-active-class="'slide-active'">
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from "@/components/header.vue";
import Footer from "@/components/footer.vue";
import ArticleTuiJian from "@/components/shouYe/article_tuijian.vue";
export default {
  name: "articleList",
  data() {
    return {
      transtionSlide: "slide-left"
    };
  },
  components: {
    Header,
    Footer,
    ArticleTuiJian
  },
  watch: {
    $route(to, from) {
      const toDepth = to.path.split("/").length;
      const fromDepth = from.path.split("/").length;
      this.transtionSlide = toDepth < fromDepth ? "slide-right" : "slide-left";
    }
  },
  methods: {},
  mounted() {}
};
</script>
<style scoped lang="scss">
.container-index {
  width: 100%;
  height: 100vh;
  padding-top: r(90);
  padding-bottom: r(90);
  overflow: hidden;
  box-sizing: border-box;
  .container-view {
    width: 100%;
    height: 100%;
  }
}
.slide-active {
  transition: 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition-property: opacity, transform;
}
.slide-left-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translate3d(30px, 0, 0);
}
.slide-left-leave-to,
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-30px, 0, 0);
}
</style>
